/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable @typescript-eslint/no-shadow */
import React, { useState, useEffect } from 'react';
import { Row, Col, Button, Image, Empty, message } from 'antd';
import styles from './ImgCard.less';
import { passOrReject } from '@/services/operatorManagement';

const titleMap = {
  1: '门头照片',
  2: '店内照片',
  3: '营业执照',
  4: '末端备案证明',
};

type ImgCardProps = {
  data: YzInfoVerify.ImageList;
};

const ImgCard: React.FC<ImgCardProps> = ({ data = {} as YzInfoVerify.ImageList }) => {
  const { imgList = [], status: verifyStatus } = data;
  const [status, setStatus] = useState<string>(() => verifyStatus);
  const [loading, setLoading] = useState(false);

  const verifyDetail = (cm_id: string, status: string, type: string) => {
    setLoading(true);
    passOrReject({ cm_id, status, type })
      .then((res) => {
        const { code, msg } = res;
        if (code == 0) {
          setStatus(status);
          message.success(msg);
        } else {
          message.error(msg);
        }
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    if (verifyStatus) {
      setStatus(verifyStatus);
    }
  }, [data]);

  return (
    <Row style={{ marginBottom: 20 }}>
      <Col span={24} className={styles.textCenter}>
        {titleMap[data.type]}
      </Col>
      <Col span={24} className={styles.border}>
        <Row justify='center' gutter={[0, 30]}>
          {imgList?.length > 0 ? (
            data?.imgList?.map((img) => (
              <Col key={img} className={styles.textCenter} span={24}>
                {img ? <Image src={img} /> : <Empty description='暂无图片' />}
              </Col>
            ))
          ) : (
            <Empty description='暂无图片' />
          )}
        </Row>
      </Col>
      <Col span={24}>
        <Row justify='center' gutter={[20, 20]}>
          {status == '1' ? (
            <>
              <Col>
                <Button
                  loading={loading}
                  type='primary'
                  onClick={() => verifyDetail(data.cm_id, '3', data.type)}
                >
                  通过
                </Button>
              </Col>
              <Col>
                <Button loading={loading} onClick={() => verifyDetail(data.cm_id, '2', data.type)}>
                  拒绝
                </Button>
              </Col>
            </>
          ) : (
            <Col>
              <Button disabled type='primary'>
                已{status == '2' ? '拒绝' : '通过'}
              </Button>
            </Col>
          )}
        </Row>
      </Col>
    </Row>
  );
};

export default ImgCard;
